<template>
  <div class="half">
    <div class="close_btn" @click="$router.go(-1)">X</div>
    <ul>
      <li  v-for="(arr,index) in arrs" @click="$router.push({path: '/path'+index})">{{arr}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'half',
  data () {
    return {
     arrs: ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]
    }
  },
  components: {
  },
  mounted: function() {
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .half {
    position: absolute;
    top:50px;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 666;
    font-family: "微软雅黑" ;
    color: white;
    background: rgba(0,0,0,.7);
  }
  ul {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
  }
  li {
    height: 40px;
    line-height: 40px;
    margin: 0;
    border-bottom: 1px dashed #2aaa6d;
  }
  li:last-child{
    border: none;
  }
  .close_btn{
    height: 20px;
    width: 20px;
    position: absolute;
    font-size: 20px;
    line-height: 20px;
    top: 10px;
    right: 8px;
    color: white;
    background: #2aaa6d;

  }
</style>
